<template>
  <section class='f-order-detail'>
    <section class="f-goods-box">
      <p>{{orderInfo.code || '--'}}
        <!-- <span style="font-size: 10px;">(kiki的WIFI)</span> -->
      </p>
      <section class="f-flex-between f-desc">
        <div>
          <p>{{orderInfo.serv_name}}</p>
          <p class="f-mt-05">
            <span>{{orderInfo.pack_name}}</span>
          </p>
        </div>
        <img style="width: 42px;height: 42px;" src="@/assets/icons/icon_order.png" alt="">
      </section>
    </section>

    <ul class="f-list-box">
      <li>
        <p>交易流水号</p>
        <p>{{orderInfo.orderno}}</p>
      </li>
      <li>
        <p>下单时间</p>
        <p>{{orderInfo.ordertime}}</p>
      </li>
      <li>
        <p>支付方式</p>
        <p>{{ pay_way[orderInfo.pay_way]}}</p>
      </li>
      <li>
        <p>支付金额</p>
        <p style="color:#FF3F3F">¥{{orderInfo.pay_money}}</p>
      </li>
    </ul>
  </section>
</template>

<script>
import { getStore, bytesToSize } from '@/utils/utils';
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import api from '../../api';

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      code: getStore('CURRENT_CODE').code,
      orderInfo: {},

      priority: {
        'base': '单次包',
        'month': '每月包',
        'rate': '累计包',
        'quicken': '提速包',
        'addi': '加油包',
        'holiday': '假日包',
      },
      pay_way: {
        'alipay': '支付宝',
        'wxpay': '微信',
      }
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '订购详情',
        show: true,
        left: true,
        leftType: 'back',
        right: false,
        rightType: 'search',
        bg: '',
      });

      getChargeLogDetail()
    })

    const getChargeLogDetail = () => {
      let json = {
        code: state.code,
        orderno: route.query.orderno
      }
      api.chargeLogDetail(json).then(res => {
        state.orderInfo = res.data
      })
    }

    return {
      ...toRefs(state),
      bytesToSize
    }
  }
}
</script>

<style lang='scss' scoped>
.f-order-detail {
  padding: 19px 14px;
  .f-goods-box {
    background: #ffffff;
    border-radius: 13px;
    font-weight: 400;
    font-size: 14px;
    color: #000000;
    padding: 18px 15px 23px 14px;
    margin-bottom: 14px;
    .f-desc {
      margin-top: 20px;
      font-weight: 400;
      font-size: 12px;
      color: #424242;
    }
  }
  .f-list-box {
    background: #ffffff;
    border-radius: 13px;
    font-weight: 300;
    font-size: 11px;
    color: #666666;
    padding: 18px 15px 23px 14px;
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 30px;
      p:last-child {
        color: #000000;
      }
    }
  }
}
</style>